<template>
	<view class="drop-box">
		<view class="con-box" :style="{padding:navWidth?'0 22rpx' : '0'}">
			<view class="left" v-if="leftSlotWidth!=0">
				<slot name="left"></slot>
			</view>
			<view class="nav-drop" :style="{width:`calc(100% - `+(Number(rightSlotWidth)+Number(leftSlotWidth))+`rpx)`}">
				<view class="dropdownItem" :style="{width:navWidth ? navWidth : 100/dropTabList.length+'%'}" v-for="(item,i) in dropTabList">
					
					<view class="nav-bg"></view>
					<view class="nav-box" @click="toggle(item)" :style="{borderLeft: isLeftBorder ? '2rpx solid #eeeeee' : 'none'}">
						<text>{{item.text||getText(item)}}</text>
						<image :class="show_label==item.props&&isShow ? 'rotate' : ''" :src="$img_path('/pagesRegion/9.png')" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="right" v-if="rightSlotWidth!=0">
				<slot name="right"></slot>
			</view>
		</view>
		
		<view class="bg-view" @click="close" v-show="isShow"></view>
		<view v-if="!isSlot" class="toggle-box" :style="{transform: isShow ? 'translateY(0)' : 'translateY(-100%)',top:toggleTop+'px'}">
			<view class="t-item" v-for="(item_s,idx) in toggleList" :key="idx" @click="select(item_s,show_label)">
				<view :style="{color: valueObj[show_label]==item_s.value ? '#E72A2A' : '#333333'}">{{item_s.text}}</view>
				<image v-if="valueObj[show_label]==item_s.value" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
			</view>
		</view>
		<view v-if="isSlot" class="toggle-box" :style="{transform: isShow ? 'translateY(0)' : 'translateY(-100%)',top:toggleTop+'px'}">
			<slot :name="show_label"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"drop",
		props:{
			/**
			 * dropTabList
			 * [
			 *  props: key,
			 * 	text: 名称,为空自动填入选项，第一项为默认选项
			 * 	slot: true,插槽，自定义下拉选项内容
			 * 	list:[],选项,text:名称，value:值
			 * ]
			 */
			dropTabList:{
				type:Array,
				default:[]
			},
			navWidth:{
				type:String,
				default:''
			},
			modelValue:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			isLeftBorder:{
				type:Boolean,
				default:true
			},
			leftSlotWidth:{
				type:String,
				default:'0'
			},
			rightSlotWidth:{
				type:String,
				default:'0'
			}
		},
		data() {
			return {
				isShow:false,
				show_label:'',
				isSlot:false,
				toggleList:[],
				valueObj:{},
				
				toggleTop:0,
			};
		},
		mounted() {
			this.valueObj = this.modelValue
			if(Object.keys(this.modelValue).length<=0){
				this.init()
			}
			
			const query = uni.createSelectorQuery().in(this);
			query
			  .select(".nav-drop")
			  .boundingClientRect((data) => {
			    console.log("得到布局位置信息" ,data);
			    console.log("节点离页面顶部的距离为" + data.top);
				this.toggleTop = data.top+data.height
				
			  })
			  .exec();

		},
		methods:{
			init(){
				this.dropTabList.forEach(e=>{
					if(e.text==''){
						// this.valueObj[e.props] = e.list[0]
						this.$set(this.valueObj,e.props ,e.list[0].value)
					}
				})
			},
			
			getText(item){
				let arr = item.list.filter(e=>{
					return this.valueObj[item.props||'']==e.value
				})
				if(arr[0]){
					return arr[0].text
				}
				
			},
			
			toggle(data){
				if(this.show_label==data.props){
					this.isShow = !this.isShow
					this.checkList(data)
				}else{
					if(this.show_label==null||!this.isShow){
						this.isShow = true
						this.checkList(data)
					}else{
						this.isShow = false
						setTimeout(()=>{
							this.isShow = true
							this.checkList(data)
						},300)
					}
				}
				
			},
			close(){
				this.isShow = false
			},
			
			checkList(data){
				this.show_label = data.props
				this.toggleList = data.list
				this.isSlot = data.slot
			},
			select(data,prop){
				// this.valueObj[this.show_label] = data.value
				this.$set(this.valueObj,prop,data.value)
				this.isShow = false
				this.$emit('change',this.valueObj)
			}
		}
	}
</script>

<style lang="scss" scoped>
.drop-box{
	position: relative;
	padding-bottom: 4rpx;
	.con-box{
		width: 100%;
		background-color: #FFFFFF;
		position: relative;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.nav-drop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		position: relative;
		.dropdownItem{
			// flex: 1;
			&:not(:first-child){
				.nav-box{
					border-left: 2rpx solid #eeeeee;
				}
			}
			&>.nav-box{
				width: 100%;
				display: flex;
				height: 68rpx;
				align-items: center;
				justify-content: center;
				position: relative;
				background-color: #FFFFFF;
				z-index: 5;
				image{
					display: inline-block;
					width: 24rpx;
					height: 24rpx;
					transform: rotate(0);
					transition: all .3s;
					&.rotate{
						transform: rotate(180deg);
					}
				}
				text{
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
				}
			}
			.nav-bg{
				position: absolute;
				width: 100vw;
				height: 68rpx;
				background-color: #FFFFFF;
				left: 0;
				top: 0;
			}
		}
	}
	.toggle-box{
		width: 100vw;
		background-color: #FFFFFF;
		padding: 0  30rpx 36rpx 32rpx;
		box-sizing: border-box;
		border-radius: 0 0 20rpx 20rpx;
		position: fixed;
		// top: 100%;
		left: 0;
		transition: all .3s;
		z-index: 2;
		.t-item{
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			&>view{
				flex:auto;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 44rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.bg-view{
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 2;
		transition: all .3s;
		top: 0;
	}
}
</style>